<template>
    <div>
        <el-select v-bind="$attrs" filterable remote :remote-method="remoteMethod" :loading="loading"
            remote-show-suffix>
            <el-option v-for="item in options" :key="item.drawingId" :label="item.drawingName"
                :value="item.drawingId" />
        </el-select>
    </div>
</template>
<script setup lang="ts">
import { getBuildingGraph } from '@/api/topo/index'
import { getRequest } from '../../utils/index'
const props = defineProps({
    projectId: {
        type: String,
        default: ''
    },
    buildingId: {
        type: String,
        default: ''
    }
})

const options = ref([]);
const list = ref([]);
const loading = ref(false);
watch(() => props.projectId + props.buildingId, () => {
    props.projectId && props.buildingId && getRequest(getBuildingGraph, { projectId: props.projectId, buildingId: props.buildingId }).then(res => {
        options.value = res.result;
        list.value = res.result;
    });
}, {
    immediate: true,
    deep: true
})

const remoteMethod = query => {
    if (query) {
        loading.value = true;
        setTimeout(() => {
            loading.value = false;
            options.value = list.value.filter(item => {
                return item.drawingName.includes(query);
            });
        }, 200);
    } else {
        options.value = list.value;
    }
};
</script>
<style lang="scss" scoped></style>
